<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { whManagerBsTbRiskHazardsHandleAppSaveUsingPost, whManagerBsTbThirdUnitGetAppPageUsingPost } from '@/genapi/wh';
import { useUserStore } from '@/stores/user';

const formData = ref({
	latitude: Number(''),
	longitude: Number(''),
	reporterName: '',
	reporterPhoneNo: '',
	riskHazardsIdList: [],
	description: '',
	enterpriseId: '',
	enterpriseIdText: '',
});

const userStore = useUserStore();

const showPopup1 = ref(false);
const confirm = ({ selectedValue, selectedOptions }, title) => {
	formData.value[title] = selectedValue[0];
	formData.value.enterpriseIdText = selectedOptions[0].text;
	showPopup1.value = false;
};

// const type = computed(() => {
// 	const res = unitColumns1.value.find((item) => {
// 		return item.value === formData.value.type;
// 	});
// 	return res?.text;
// });

const unitColumns1 = ref();

whManagerBsTbThirdUnitGetAppPageUsingPost({ data: {} }).then((res) => {
	const data = convertToValueTextArray(res.data?.records);
  console.log(data)
	unitColumns1.value = data;
});
function convertToValueTextArray(objArray) {
	const resultMap = new Map();
	const resultArray = [];

	objArray.forEach((obj) => {
		const { id, name } = obj;
		const valueTextObj = { value: id, text: name };

		if (!resultMap.has(id)) {
			resultMap.set(id, valueTextObj);
			resultArray.push(valueTextObj);
		}
	});

	return resultArray;
}

const router = useRouter();
function returnClick() {
	router.replace('/home');
}

function commitClick() {
	whManagerBsTbRiskHazardsHandleAppSaveUsingPost({ data: { ...formData.value } }).then((res) => {
		alert(res.message);
	});
}

function handleSuccess(responseText, option, fileItem) {
	formData.value.riskHazardsIdList.push(JSON.parse(responseText.responseText).data.id);
}
function deleteImg(files, fileList, index) {
	formData.value.splice(files.index, 1);
}
const fileList = ref([]);
</script>

<template>
	<div class="header bg-[#ffffff]" flex justify-center items-center pt-10 h-20>
		<img src="./assets/return.png" alt="" h-5 w-5 @click="returnClick" absolute left-4 />
		<span>隐患随手拍</span>
	</div>
	<div class="body bg-[#F5F7FB]">
		<div pt-3 class="bg-[#ffffff]">
			<span px-4>人员信息</span>
			<nut-form>
				<nut-form-item label="姓名" required :rules="[{ required: true, message: '请填写姓名 ' }]">
					<nut-input v-model="formData.reporterName" placeholder="请输入姓名" />
				</nut-form-item>
				<nut-form-item label="联系电话" required :rules="[{ required: true, message: '请填写联系电话 ' }]">
					<nut-input v-model="formData.reporterPhoneNo" placeholder="请输入" />
				</nut-form-item>
			</nut-form>
		</div>
		<div flex border-b border-solid class="border-[#E3E4E5] bg-[#ffffff]" mt-2 flex-col>
			<span px-4 pt-2>隐患详情</span>
			<nut-form :model-value="formData">
				<nut-form-item prop="enterpriseId" label="所属企业">
					<div class="selector-box" @click="showPopup1 = true">
						{{ formData.enterpriseIdText }}<span v-if="!formData.enterpriseId">请选择</span>
					</div>
					<nut-popup v-model:visible="showPopup1" position="bottom">
						<nut-picker
							@confirm="(params) => confirm(params, 'enterpriseId')"
							:columns="unitColumns1"
							title="请选择企业类型"
							@cancel="showPopup1 = false"
						/>
					</nut-popup>
				</nut-form-item>
			</nut-form>
			<div px-4>隐患位置</div>
			<nut-form>
				<nut-form-item label="经度">
					<nut-input v-model="formData.longitude" placeholder="请输入" type="text" />
				</nut-form-item>
				<nut-form-item label="纬度">
					<nut-input v-model="formData.latitude" placeholder="请输入" type="text" />
				</nut-form-item>
			</nut-form>

			<nut-form>
				<nut-form-item>
					<div class="validity-upload-title" mb-2>隐患描述</div>
					<nut-textarea placeholder="请输入" type="text" v-model="formData.description" />
				</nut-form-item>
				<nut-form-item>
					<div class="validity-upload-title" mb-5>隐患图片</div>
					<nut-uploader
						accept="image/*"
						is-deletable
						class="validity-uploader"
						url="/whManager/system/systemFile/upload"
						v-model:file-list="fileList"
						:headers="{
							Authorization: userStore.authorization,
						}"
						maximum="3"
						multiple
						@delete="deleteImg"
						@success="handleSuccess"
					></nut-uploader>
				</nut-form-item>
				<nut-form-item>
					<nut-button block class="create-unit-submit-button" @click="commitClick"> 提交 </nut-button>
				</nut-form-item>
			</nut-form>
		</div>
	</div>
</template>

<style scoped lang="scss">
:deep(.nut-cell-group__wrap) {
	box-shadow: none;
}
:deep(.nut-input--border) {
	border-bottom: none;
}
.header {
	span {
		color: #1c2023;
		text-align: center;
		font-style: normal;
	}
}

.body {
	height: calc(100% - 5rem);
	overflow-y: scroll;
}
.create-unit-submit-button {
	height: 35px;
	font-size: 14px;
	color: #fff;
	background: #165dff;
	border: 1px solid #034196;
	border-radius: 16px;
}
.validity-upload-title {
	font-size: 14px;
	color: #000;
}
:deep(.nut-form-item__body__slots .nut-textarea .nut-textarea__textarea) {
	display: block;
	height: 90px;
	padding-top: 4px;
	padding-left: 4px;
	background-color: #f5f7fb;
}
</style>
